<template>
  <div class="resource-container">
    <el-table :data="tableData" border style="width: 100%">
      <el-table-column align="center" prop="id" label="编号" width="60" />
      <el-table-column align="center" prop="name" label="资源名称" />
      <el-table-column align="center" prop="url" label="资源路径" />
      <el-table-column align="center" prop="description" label="描述" />
      <el-table-column align="center" label="添加时间">
        <template #default="{ row }">
          {{ dayjs(row.createTime).format('YYYY-MM-DD HH:mm:ss') }}
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页器 -->
    <div class="pagination-box">
      <el-pagination v-model:current-page="paginationParams.currentPage" v-model:page-size="paginationParams.pageSize"
        :page-sizes="[10, 20, 50, 100]" :background="true" layout="total, sizes, prev, pager, next, jumper"
        :total="paginationParams.total" @size-change="handleSizeChange" @current-change="handleCurrentChange" />
    </div>
  </div>
</template>

<script setup lang="ts">
import * as http from '@/request/http';
import { dayjs } from 'element-plus';
import { reactive, ref } from 'vue';

// 表格数据
const tableData = ref<IResourceList[]>([]);

// 分页器相关参数
const paginationParams = reactive({
  currentPage: 1,
  pageSize: 10,
  total: 100,
})

// 抽取  请求资源列表的方法
const getResourceList = () => {
  http.resource.resourceList({
    pageNum: paginationParams.currentPage,
    pageSize: paginationParams.pageSize,
  }).then(res => {
    console.log('资源列表数据 : ', res);
    if (res.code === 200) {
      tableData.value = res.data.list;   // 更新表格数据
      paginationParams.total = res.data.total;   // 更新分页器总数
    }
  })
}

// 页面加载进来  先发送一次请求 获取表格数据
getResourceList();


// 改变 分页器的页容量
const handleSizeChange = (val: number) => {
  // console.log(`页容量发生变化 : ${val}`);
  paginationParams.pageSize = val;
  // 重新请求    更新数据
  getResourceList();
}
// 改变 分页器的当前页
const handleCurrentChange = (val: number) => {
  // console.log(`当前页发生变化 : ${val}`);
  paginationParams.currentPage = val;
  // 重新请求  更新数据
  getResourceList();
}


</script>

<style scoped lang="less">
// 分页器
.pagination-box {
  display: flex;
  flex-direction: row-reverse;
  margin: 20px 0;
}
</style>